<template>
  <div class="login">
    <!--    系统名称-->
    <div class="system_name">
<!--      <img src="~@/assets/images/logo.png" alt="" style="width: 30px;height: 30px">-->
      嵘屹科技自动化监测云平台
    </div>
    <!-- 背景图 -->
    <div class="bk_fixed">
      <el-image :src="require('./imgages/bk1.jpg')" fit="cover"></el-image>
    </div>
        <canvas id="Mycanvas"></canvas>
    <!-- 登录框 -->
    <div class="login_wrap">

      <section class="title_wrap fade_animition">
        <!--         <img src="~@/assets/images/logo.png" alt="">-->
        <!--        <img src="./imgages/logo.png" alt="" style="width: 100px;height: 80px;margin-right: 30px;margin-top: 10px">-->
        <p style="display: inline-block;;font-size: 35px ;  color: #1990FE; ">管理员登录</p>
      </section>
      <!-- 账号密码输入错误时的提示 -->
      <section class="login_info">
        <transition name="fade_error">
          <div class="info_wrap" v-if="isShowErrorInfo">
            <i class="el-icon-info"></i>
            <p class="info_wrap-p">账号或密码错误，请重新输入</p>
          </div>
        </transition>
      </section>
      <!-- 账号密码表单 -->
      <section class="form">
        <beauty-input v-model="account" @keyup.enter.native="_handleLogin" clearable
                      :placeholder="userInput"></beauty-input>
        <beauty-input v-model="password" @keyup.enter.native="_handleLogin" :type="pwdType" :placeholder="pwdInput"
                      clearable class="form_password"><i @click="isExportPwd = !isExportPwd" slot="suffix"
                                                         class="export_pwd" :class="suffixIcon"></i></beauty-input>
        <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 20px">
          <identify @express="expressValueBtn" style="margin-left: 5%" ref="identifyCount"></identify>
          <el-input class="inputBox" v-model="inputCode" placeholder="请输入左侧图案的值" type="number"
                    @keyup.enter.native="_handleLogin()"></el-input>

        </div>
      </section>
      <!-- 提交按钮 -->
      <section class="btn fade_animition">
        <el-button class="btn_login" :loading="isLoading" :class="{allow: isAllowLogin}" @click="_handleLogin">登录
        </el-button>
      </section>
      <!-- 忘记密码 -->
      <section class="forget fade_animition" style="margin-top: -5px">
        <!--        <button class="get_password" @click="$router.push('/forget')">忘记密码？</button>-->
        <!--        <el-button type="text" @click="$router.push('/register')">去注册</el-button>-->
      </section>
    </div>
    <!-- 点击密码弹窗 -->
    <transition name="fade_error">
      <div class="getpwd" v-if="isShowForgetFix" @click="isShowForgetFix = !isShowForgetFix">
        <div class="getpwd_bk"></div>
        <div class="getwpd_wrap" @click.stop>
          <p class="get_pwd-title">忘记密码？</p>
          <p class="get_wpd-info">请联系管理员重置密码</p>
          <button class="get_btn" @click.stop="isShowForgetFix = !isShowForgetFix">我知道了</button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script src=""></script>
<script>
  import identify from '../../components/identify/Count.vue'
  import {setLocalStorageItem, removeLocalStorageItem} from '@/utils/storage-helper'
  import {ORGANIZATION_TREE} from '@/utils/constant'
  // import { getExpires } from './helpr'
  import {ERP_ALL_COMPANY_SELECT_LIST, ERP_ALL_GOODS_SELECT_LIST, ERP_ALL_CUSTOMER_SELECT_LIST} from '@/utils/constant'
  import {
    getOrganizationTree,
  } from '@/services/model/user'
  import BeautyInput from '@/components/beauty-input'
  import {login} from '@/services/model/login'
  import {canvasInit, canvasClear} from './canvas'
  import cryptoJs from 'crypto-js'

  export default {
    data() {
      return {
        // 验证码
        inputCode: '', // 输入的值
        expressValue1: '', // 表达式的值
        userInput: {
          name: "账号",
          icon: "iconfont iconyonghuming"
        },
        pwdInput: {
          name: "密码",
          icon: "iconfont iconmima-copy"
        },
        account: '',
        Verification: '',
        password: '',
        // true 密码可见  false 密码不可见
        isExportPwd: false,
        // true 显示错误提示  false关闭
        isShowErrorInfo: false,
        // true 显示忘记密码提示  false 关闭
        isShowForgetFix: false,
        // 接口正在请求
        isLoading: false,
        canvas: '',
      }
    },
    computed: {
      // 设置 密码是否可见时的 图标
      suffixIcon() {
        return this.isExportPwd ? 'el-icon-view' : 'iconfont iconeye'
      },
      // 设置  密码input的type类型
      pwdType() {
        return this.isExportPwd ? 'text' : 'password'
      },
      // 当账号、密码都有值时，才允许登录
      isAllowLogin() {
        return !!this.account && !!this.password
      }
    },
    components: {BeautyInput, identify},
    beforeDestroy() {
      canvasClear();
    },
    methods: {

      expressValueBtn(item) {
        this.expressValue1 = item
      },
      open() {
        this.$alert('您有未接收的督办信息，请查收', '消息提示', {
          confirmButtonText: '确定',
        });
      },

      //添加组织架构缓存
      async getOrganizationTree() {
        let res = await getOrganizationTree();
        //缓存一天过期
        setLocalStorageItem(ORGANIZATION_TREE, res.data, 1)
      },
//des加密
      encryptByDES(message, key) {
        var keyHex = cryptoJs.enc.Utf8.parse(key);
        var encrypted = cryptoJs.DES.encrypt(message, keyHex, {
          mode: cryptoJs.mode.ECB,
          padding: cryptoJs.pad.Pkcs7
        })
        return encrypted.ciphertext.toString();
      },
      // 处理登录
      async _handleLogin() {
        if (!this.isAllowLogin) return false
        if (this.inputCode == '' || this.inputCode == null) {
          this.$message({
            type: 'error',
            title: '提示',
            message: '请输入验证码'
          })
          this.$refs.identifyCount.getCode()
        } else {
          if (eval(this.inputCode) === eval(this.expressValue1)) {
            const DATA = {
              Account: this.account,
              PassWord: this.password,
            }
            let encryptedData = this.encryptByDES(JSON.stringify(DATA), 'interface.jgkj').toUpperCase()
            this.isLoading = true
            try {
              let {data} = await login({encryptedData: encryptedData})
              this.isLoading = false
              if (data.isNotice) {
                await this.open()

              }
              await this.getOrganizationTree();
              //清除相应缓存
              removeLocalStorageItem(ERP_ALL_COMPANY_SELECT_LIST)
              removeLocalStorageItem(ERP_ALL_GOODS_SELECT_LIST)
              removeLocalStorageItem(ERP_ALL_CUSTOMER_SELECT_LIST)
              // 由于改为了sesstion登陆，等addRouter为 []时，在路由防卫中才会重新拉去数据
              this.$store.commit('setState', {name: 'addRouter', value: []})
              await this.$router.replace('/')
            } catch (error) {

              this.isLoading = false
              this.inputCode = ''
              this.password = ''
              this.$refs.identifyCount.getCode()
            }


          } else if (eval(this.inputCode) !== eval(this.expressValue1)) {
            this.$message({
              type: 'error',
              title: '提示',
              message: '请输入正确验证码'
            })
            this.$refs.identifyCount.getCode()
            this.inputCode = ''
          }

        }
      }

    },
    mounted() {
      this.canvas = document.getElementById('Mycanvas')
      this.context = this.canvas.getContext('2d')
      canvasInit(this.canvas, this.context)
    }
  }
</script>

<style lang="less" scoped>
  .el-button--text {
    color: #4caf50;
  }

  .inputBox {
    width: 55%;
  }

  .login {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    .bk_fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;

      .el-image {
        background-repeat: repeat-x;
        width: 100%;
        height: 100%;
      }
    }

    #Mycanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
    }

    .login_wrap {
      position: absolute;
      right: 10vw;
      /*左上角*/
      background-repeat: no-repeat;
      margin: 0 auto;
      width: 500px;
      height: 478px;
      border-radius: 5px;
      opacity: 0.9;
      padding-top: 20px;
      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
      animation: fade_bottom 1.5s;
      @keyframes fade_bottom {
        from {
          transform: translateY(30px);
          opacity: 0.2;
        }
        to {
          transform: translateY(0px);
          opacity: 0.9;
        }
      }

      .title_wrap::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 220px; /* 根据需要调整左边距 */
        right: 220px; /* 根据需要调整右边距 */
        border-bottom: 3px solid #1b1b1b; /* 设置底部边框的样式、宽度和颜色 */
        transform: translateY(100%); /* 将伪元素向下移动其自身高度的100%，使得实际边框看起来更短 */
      }

      .title_wrap {
        position: relative;
        line-height: 60px;
        text-align: center;
        align-items: center;
        color: #1990FE;

        & > p {
          font-size: 30px;
          font-weight: bold;
          color: #fff;
        }

        img {
          width: 100%;
        }

        .main {
          padding: 2px 0 0 16px;

          h6 {
            font-size: 21px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #303133;
            line-height: 29px;
          }

          p {
            margin-top: 2px;
            font-size: 12px;
            transform: scale(0.916);
            transform-origin: 0;
            color: rgba(150, 153, 151, 1);
            line-height: 16px;
          }
        }
      }

      .login_info {
        margin-top: 10px;
        height: 24px;

        .info_wrap {
          margin: 0 auto;
          width: 264px;
          height: 100%;
          background: rgba(243, 94, 95, 0.2);
          border-radius: 4px;
          opacity: 0.9;
          text-align: center;
          font-size: 12px;
          color: #F35E5F;
          display: flex;
          justify-content: center;
          align-items: center;

          .el-icon-info {
            font-size: 16px;
            margin-right: 8px;
          }
        }
      }

      .form {
        padding: 0px 80px 0;

        .form_password {
          margin-top: 23px;
        }
      }

      .btn {
        margin-top: 20px;
        width: 100%;
        height: 58px;
        text-align: center;

        .btn_login {
          height: 100%;
          width: 192px;
          border-radius: 10px;
          font-weight: 600;
          font-size: 25px;
          color: #ffffff;
          margin-top: -10px;
          background-color: #1b1b1b;
          cursor: not-allowed;
          transition: background 0.28s;
          opacity: 0.9;

          &.allow {
            border: none;
            color: #ffffff;
            background-color: #1990FE;
            cursor: pointer;
            opacity: 1;
          }
        }
      }

      .forget {
        margin-top: 16px;
        text-align: center;

        .get_password {
          color: #909399;
          line-height: 20px;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }

    .getpwd {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;

      .getpwd_bk {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
      }

      .getwpd_wrap {
        position: absolute;
        right: 40.6%;
        top: 40%;
        width: 380px;
        height: 228px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        text-align: center;

        .get_pwd-title {
          margin-top: 40px;
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #303133;
          line-height: 28px;
        }

        .get_wpd-info {
          display: block;
          margin-top: 10px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(96, 98, 102, 1);
          line-height: 22px;
        }

        .get_btn {
          margin-top: 40px;
          width: 312px;
          height: 48px;
          background: #1990FE;
          border-radius: 4px;
          cursor: pointer;
          font-size: 19px;
          color: #ffffff;
        }
      }
    }
  }

  .export_pwd {
    display: inline-block;
    margin-top: 11px;
    cursor: pointer;
    font-size: 14px;
  }

  .fade_error-enter-active, .fade_error-leave-active {
    transition: all 0.28s;
  }

  .fade_error-enter, .fade_error-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0 !important;
    transform: translateY(-10px);
  }

  .fade_animition {
    animation: fade_common 1s;
    @keyframes fade_common {
      from {
        transform: translateY(20px);
      }
      to {
        transform: translateY(0px);
      }
    }
  }
  .system_name{
    font-family: YouSheBiaoTiHei;
    position: absolute;
    top: 5vh;
    left: 5vh;
    z-index: 999;
    color: #FFFFFF;
    font-size: 50px;
  }
</style>
